﻿{% layout 'checkout' %}

<div class="col-md-7">
    <div class="box">
        <div class="form-horizontal">
            {% form 'edit_checkout_step_2', checkout %}
                <div class="box-header">
                    <h2>Customer information</h2>
                </div>
                <div class="box-content">
                    {% if checkout.email.size != 0 %}
                        <input id="checkout_email" name="checkout[email]" type="hidden" value="{{ checkout.email }}" />
                        <p>{{ checkout.email }}</p>
                        {% if checkout.requires_shipping %}
                            <p>
                                {{ checkout.shipping_address.first_name }} {{ checkout.shipping_address.last_name }}{% if checkout.shipping_address.company.size > 0 %} ({{checkout.shipping_address.company}}){% endif %}<br />
                                {{ checkout.shipping_address.country }}, {% if checkout.shipping_address.province.size != 0 %}{{ checkout.shipping_address.province }}, {% endif %}{{ checkout.shipping_address.city }}<br />
                                {{ checkout.shipping_address.zip }}, {{ checkout.shipping_address.street }}
                                {% if checkout.shipping_address.phone.size != 0 %}<br />{{ checkout.shipping_address.phone }}{% endif %}
                            </p>
                        {% endif %}
                    {% else %}
                        <div class="form-group has-feedback">
                            <label class="col-sm-4 control-label" for="checkout_email">Email</label>
                            <div class="col-sm-8">
                                <input class="form-control" id="checkout_email" name="checkout[email]" required="required" type="email" value="" />
                                <span aria-hidden="true" class="glyphicon glyphicon-exclamation-sign form-control-feedback"></span>
                            </div>
                        </div>
                    {% endif %}
                    <div class="box-inner-header">
                        <h2>Shipping method</h2>
                    </div>
                    <div class="form-group" id="shipping-methods">
                        {% for shipping_method in checkout.shipping_methods %}
                            <div class="col-md-12" style="cursor: pointer;">
                                <input id="checkout_shipping_method_{{ shipping_method.handle }}" name="checkout[shipping_method_id]" type="radio" value="{{ shipping_method.handle }}" required="required" {% if checkout.shipping_methods.size == 1 %}checked="checked"{% endif %} />
                                <label for="checkout_shipping_method_{{ shipping_method.handle }}"></label>
                                <span class="shipping_method_label">
                                    {{ shipping_method.title }}
                                    (<span class="price" >
                                        <strong>
                                            {% if shipping_method.price == 0 %}
                                                FREE!
                                            {% else %}
                                                {% include 'price' with shipping_method.price %}
                                            {% endif %}
                                        </strong>
                                    </span>)
                                </span>
                            </div>
                        {% endfor %}
                    </div>
                    <div class="box-inner-header">
                        <h2>Billing & payment</h2>
                    </div>
                    <div class="form-group" id="payment-methods">
                        {% for payment_method in checkout.payment_methods %}
                            <div class="col-md-12" style="cursor: pointer;">
                                <div class="radio-button-group" data-type="{{ payment_method.type }}">
                                    <input id="checkout_payment_method_{{ payment_method.code }}" name="checkout[payment_method_id]" type="radio" value="{{ payment_method.code }}" required="required" {% if checkout.payment_methods.size == 1 %}checked="checked"{% endif %} />
                                    <label for="checkout_payment_method_{{ payment_method.code }}"></label>
                                    <img src="{{ payment_method.logo_url }}" style="float: left; margin-right: 20px;max-width:100px;" />
                                    <span style="display: block; overflow: hidden;">
                                        <strong>{{ payment_method.title }}</strong><br />
                                        {{ payment_method.description }}
                                    </span>
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                    <div class="box-inner-header">
                        <h2>Billing address</h2>
                    </div>
                    {% if checkout.requires_shipping %}
                        <div class="form-group">
                            <div class="col-sm-8">
                                <div class="checkbox">
                                    <label>
                                        <input checked="checked" id="billing-address-equals-shipping-address" type="checkbox"> Take billing address from shipping address
                                    </label>
                                </div>
                            </div>
                        </div>
                    {% endif %}
                    <div id="billing-address" style="display: {% if checkout.requires_shipping %} none {% else %} block {% endif %};">
                        {% if checkout.guest_login != true and customer.addresses.size > 0 %}
                            <div class="form-group">
                                <label class="col-sm-4 control-label" for="checkout_email">Addresses</label>
                                <div class="col-sm-8">
                                    <select class="form-control" id="customer-addresses">
                                        {% for address in customer.addresses %}
                                            <option value="{{ address.id }}">
                                                <a href="#">
                                                    {{address.city}} {{ address.street }},
                                                    {{ address.country }},
                                                    {% if address.province != null %}
                                                        {{ address.province }},
                                                    {% endif %}
                                                    {{ address.name }}
                                                </a>
                                            </option>
                                        {% endfor %}
                                    </select>
                                </div>
                            </div>
                            <hr />
                        {% endif %}
                        <div class="form-group has-feedback">
                            <label class="col-sm-4 control-label" for="checkout_first_name">First name</label>
                            <div class="col-sm-8">
                                <input class="form-control" id="checkout_first_name" name="checkout[first_name]" required="required" type="text" value="{{ checkout.shipping_address.first_name }}" />
                                <span aria-hidden="true" class="glyphicon glyphicon-exclamation-sign form-control-feedback"></span>
                            </div>
                        </div>
                        <div class="form-group has-feedback">
                            <label class="col-sm-4 control-label" for="checkout_last_name">Last name</label>
                            <div class="col-sm-8">
                                <input class="form-control" id="checkout_last_name" name="checkout[last_name]" required="required" type="text" value="{{ checkout.shipping_address.last_name }}" />
                                <span aria-hidden="true" class="glyphicon glyphicon-exclamation-sign form-control-feedback"></span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4 control-label" for="checkout_country">Country</label>
                            <div class="col-sm-8">
                                <select class="form-control" id="checkout_country" name="checkout[country]" required="required">{{ country_option_tags }}</select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4 control-label" for="checkout_province">Province</label>
                            <div class="col-sm-8">
                                <select class="form-control" data-default="{{ form.province }}" id="checkout_province" name="checkout[province]"></select>
                            </div>
                        </div>
                        <div class="form-group has-feedback">
                            <label class="col-sm-4 control-label" for="checkout_city">City</label>
                            <div class="col-sm-8">
                                <input class="form-control" id="checkout_city" name="checkout[city]" required="required" type="text" value="{{ checkout.shipping_address.city }}" />
                                <span aria-hidden="true" class="glyphicon glyphicon-exclamation-sign form-control-feedback"></span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4 control-label" for="checkout_company">Company</label>
                            <div class="col-sm-8">
                                <input class="form-control" id="checkout_company" name="checkout[company]" type="text" value="{{ checkout.shipping_address.company }}" />
                            </div>
                        </div>
                        <div class="form-group has-feedback">
                            <label class="col-sm-4 control-label" for="checkout_address1">Address line 1</label>
                            <div class="col-sm-8">
                                <input class="form-control" id="checkout_address1" name="checkout[address1]" required="required" type="text" value="{{ checkout.shipping_address.address1 }}" />
                                <span aria-hidden="true" class="glyphicon glyphicon-exclamation-sign form-control-feedback"></span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4 control-label" for="checkout_address2">Address line 2</label>
                            <div class="col-sm-8">
                                <input class="form-control" id="checkout_address2" name="checkout[address2]" type="text" value="{{ checkout.shipping_address.address2 }}" />
                            </div>
                        </div>
                        <div class="form-group has-feedback">
                            <label class="col-sm-4 control-label" for="checkout_zip">Zip / Postal code</label>
                            <div class="col-sm-8">
                                <input class="form-control" id="checkout_zip" name="checkout[zip]" required="required" type="text" value="{{ checkout.shipping_address.zip }}" />
                                <span aria-hidden="true" class="glyphicon glyphicon-exclamation-sign form-control-feedback"></span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4 control-label" for="checkout_phone">Phone</label>
                            <div class="col-sm-8">
                                <input class="form-control" id="checkout_phone" name="checkout[phone]" type="text" value="{{ checkout.shipping_address.phone }}" />
                            </div>
                        </div>
                    </div>
                </div>
                <div class="box-footer">
                    <div class="pull-left">
                        <a class="btn btn-default" href="/checkout/step-1" type="button">Shipping address</a>
                    </div>
                    <div class="pull-right">
                        <button class="btn btn-primary" type="submit">Create order</button>
                    </div>
                </div>
            {% endform %}
        </div>
    </div>
</div>
{% include 'checkout_totals' %}